<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <!-- <img src="tu2.jpg" id="scream" alt="" width="200"> -->
    <canvas id="myCanvas" width="800" height="800" style="border:1px solid #000000;">
    </canvas>
</body>
<script>
    // var c=document.getElementById("myCanvas");
    // var ctx=c.getContext("2d");
    // ctx.fillStyle="#FF0000";
    // ctx.fillRect(0,0,150,75);

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.moveTo(0, 0);
    // ctx.lineTo(200, 100);
    // ctx.stroke();

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.beginPath();
    // ctx.arc(95, 50, 40, 0, 2 * Math.PI);
    // ctx.stroke();

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.font = "30px Arial";
    // ctx.fillText("Hello World", 10, 50);

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.font = "30px Arial";
    // ctx.strokeText("Hello World", 10, 50);

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // // 创建渐变
    // var grd = ctx.createLinearGradient(0, 0, 200, 0);
    // grd.addColorStop(0, "red");
    // grd.addColorStop(1, "white");
    // // 填充渐变
    // ctx.fillStyle = grd;
    // ctx.fillRect(10, 10, 150, 80);

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // // 创建渐变
    // var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
    // grd.addColorStop(0, "red");
    // grd.addColorStop(1, "white");
    // // 填充渐变
    // ctx.fillStyle = grd;
    // ctx.fillRect(10, 10, 150, 80);

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // var img = document.getElementById("scream");
    // ctx.drawImage(img, 10, 10);

    // 矩形
    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.moveTo(20, 20);
    // ctx.lineTo(20, 60); //分别为x轴，和y轴
    // ctx.lineTo(80, 60);
    // ctx.lineTo(80, 20);
    // ctx.lineTo(20, 20);
    // ctx.stroke();

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.rect(20, 20, 150, 100);
    // ctx.stroke();

    // 填充矩形
    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.fillRect(20, 20, 150, 100);

    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.strokeRect(20, 20, 150, 100);

    // 方形
    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.rect(20, 20, 100, 100);
    // ctx.stroke();

    // 多边形
    // var c = document.getElementById("myCanvas");
    // var ctx = c.getContext("2d");
    // ctx.moveTo(20, 20);
    // ctx.lineTo(0, 60); //分别为x轴，和y轴
    // ctx.lineTo(20, 100);
    // ctx.lineTo(80, 100);
    // ctx.lineTo(100, 60);
    // ctx.lineTo(80, 20);
    // ctx.lineTo(20, 20);
    // ctx.stroke();

    // const ctx = document.getElementById('myCanvas').getContext('2d');
    // drawPolygonPath(6, 150, 250, 250, ctx); //画路径
    // ctx.stroke(); //描边
    // function drawPolygonPath(sideNum, radius, originX, originY, ctx) {
    //     ctx.beginPath();
    //     const unitAngle = Math.PI * 2 / sideNum; //计算单元角度
    //     let angle = 0; //初始角度
    //     let xLength, yLength;
    //     // ctx.moveTo(originX, originY);
    //     for (let i = 0; i < sideNum; i++) { //遍历计算点，并lineTo()绘制路径
    //         xLength = radius * Math.cos(angle);
    //         yLength = radius * Math.sin(angle);
    //         // console.log('xLength: ' + xLength);
    //         // console.log('yLength: ' + yLength);
    //         ctx.lineTo(originX + xLength, originY - yLength); //绘制路径
    //         angle += unitAngle;
    //     }
    //     ctx.closePath(); //闭合路径，也可在for循环中多一次循环lineTo()至起点
    // }

    // 圆形
    // const ctx = document.getElementById('myCanvas').getContext('2d');
    // ctx.arc(100, 100, 50, 0, 2 * Math.PI) // π
    // ctx.stroke()

    // 扇形
    // const ctx = document.getElementById('myCanvas').getContext('2d');
    // ctx.save();
    // ctx.translate(100, 100);
    // ctx.arc(0,0,100,0, 30*Math.PI/180);
    // ctx.restore();
    // //第一条线
    // ctx.save();
    // ctx.moveTo(100,100);
    // ctx.lineTo(200,100);
    // ctx.restore();
    // //第二条线
    // ctx.save();
    // ctx.translate(100, 100);
    // ctx.moveTo(0,0);
    // ctx.rotate(30*Math.PI/180);
    // ctx.lineTo(100,0);
    // ctx.stroke();
    // ctx.restore();

    // 太极
    // 获取到画布元素
    let myCanvas = document.getElementById("myCanvas");
    // 通过画布元素获取到上下文（画笔）
    let ctx = myCanvas.getContext("2d");
    // 右边白色的半圆
    ctx.fillStyle = "#cab";
    ctx.beginPath();
    ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
    ctx.fill();
    // 左边黑色的圆
    ctx.fillStyle = "#acf";
    ctx.beginPath();
    ctx.arc(300, 300, 100, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
    ctx.fill();
    // 左边白色的小圆
    ctx.fillStyle = "#cab";
    ctx.beginPath();
    ctx.arc(300, 250, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90, true);
    ctx.fill();
    // 右边黑色的小圆
    ctx.fillStyle = "#acf";
    ctx.beginPath();
    ctx.arc(300, 350, 50, (Math.PI / 180) * 270, (Math.PI / 180) * 90);
    ctx.fill();
    // 黑色的小圆点
    ctx.fillStyle = "#acf";
    ctx.beginPath();
    ctx.arc(300, 250, 5, 0, Math.PI * 2);
    ctx.fill();
    // 白色的小圆点
    ctx.fillStyle = "#cab";
    ctx.beginPath();
    ctx.arc(300, 350, 5, 0, Math.PI * 2);
    ctx.fill();

    // 国旗
    // var canvas = document.getElementById("myCanvas");
    // var ctx = canvas.getContext("2d");
    // canvas.width = 900;
    // canvas.height = 600;
    // // 绘制中国国旗
    // ctx.fillStyle = "red";
    // ctx.fillRect(0, 0, 900, 600);

    // ctx.strokeStyle = "#ffffff";
    // ctx.lineWidth = 5;
    // ctx.strokeRect(-1, -1, 902, 602);
    // //绘制五角星
    // //x:cos(18+i*72)*r
    // //y:-sin(54+i*72)*r
    // //角度化 num/180*Math.PI
    // //依次制定大圆和小圆的一个点
    // //400是圆的圆心点，如果不加400，则圆心点为0,0
    // ctx.fillStyle = "yellow";
    // drawStar(ctx, 60, 120, 160, 0);
    // var starF = [35, 5, 335, 305];
    // for (var j = 0; j < starF.length; j++) {
    //     var rot = 18 + j * 15;
    //     var x = Math.cos(starF[j] / 180 * Math.PI) * 180 + 120;
    //     var y = -Math.sin(starF[j] / 180 * Math.PI) * 180 + 160;
    //     drawStar(ctx, 60 / 2.4, x, y, rot);
    // }

    // function drawStar(ctx, R, x, y, rot) {
    //     ctx.beginPath();
    //     for (var i = 0; i < 5; i++) {
    //         ctx.lineTo(Math.cos((18 + i * 72 - rot) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - rot) / 180 * Math
    //             .PI) * R + y);
    //         ctx.lineTo(Math.cos((54 + i * 72 - rot) / 180 * Math.PI) * R / 2.4 + x, -Math.sin((54 + i * 72 - rot) /
    //             180 * Math.PI) * R / 2.4 + y);
    //     };
    //     ctx.closePath();
    //     ctx.fill();
    // }
</script>

</html>